﻿<h2>TODOs List</h2>

<div data-role="grid" data-draggable="true" data-selectable="row" data-sortable="true" data-groupable="true" data-pageable="{pageSize:'5',refresh:true, pageSizes:true}" data-columns='[
    {
        field: "id",
        hidden: true
    },

    {
        title: "Title",
        field: "title"
    }, 
    {
        command: [
            {
            name: "TODOs Details",
            click: getTodoListDetails   
             },
             {
            name: "Add TODO",
            click: addToDo   
             }
        ]
    }
    
    ]'
    data-bind="source: todos">
</div>


<a href="#/todo-list/create" class="k-button" id="btn-create-todo">Create TODO List</a>

<script>
    function getTodoListDetails(data) {
        data.preventDefault();
        var dataItem = this.dataItem($(data.currentTarget).closest("tr"));
        var todoData = dataItem;
        var id = todoData.id;

        window.location = "#/todo-list/" + id;
    }
    
    function addToDo(data) {
        data.preventDefault();
        var dataItem = this.dataItem($(data.currentTarget).closest("tr"));
        var todoData = dataItem;
        var id = todoData.id;

        window.location = "#/todo-list/" + id + "/create";
    }
</script>

